<div nz-row class="item">
  <div nz-col nzSpan="22"></div>
  <div nz-col nzSpan="2">
    <button nz-button nzType="primary" (click)="showModal()">添加</button>
  </div>
</div>
<nz-table #expandTable [nzData]="list" nzTableLayout="fixed">
  <thead>
  <tr>
    <th>操作名称</th>
    <!--<th>排序</th>-->
    <th>所属上级模块名称</th>
    <th>类型</th>
    <!--<th>id</th>-->
    <th>操作路径</th>
    <th>图标</th>
    <th>请求方式</th>
    <!--<th>上级id</th>-->
    <th>备注</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let data of expandTable.data">
    <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
      <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
        <td
          [nzIndentSize]="20"
          [nzShowExpand]="!!item.children"
          [(nzExpand)]="item.expand"
          (nzExpandChange)="collapse(mapOfExpandedData[data.key], item, $event)"
        >
          {{ item.action_name }}
        </td>
        <!--<td>{{ item.sort }}</td>-->
        <td>{{ item.module_name }}</td>
        <td>
          <nz-tag [nzColor]="'green'" *ngIf="item.type == 1">{{ item.type | typePipe}}</nz-tag>
          <nz-tag [nzColor]="'orange'" *ngIf="item.type == 2">{{ item.type | typePipe}}</nz-tag>
          <nz-tag [nzColor]="'purple'" *ngIf="item.type == 3">{{ item.type | typePipe}}</nz-tag>
        </td>
        <!--<td>{{ item._id }}</td>-->
        <td>{{ item.url }}</td>
        <td><div *ngIf="item.type == 1"><i nz-icon [nzType]="item.icon"></i>  {{item.icon}}</div></td>
        <td>{{ item.type == 3 ? item.method: '' }}</td>
        <!--<td>{{ item.module_id }}</td>-->
        <td>{{ item.description }}</td>
        <td>
          <button nz-button nzType="primary" (click)="showModal(item)" nzSize="small">修改</button>
          <button nz-button nzDanger nz-popconfirm
                  nzPopconfirmTitle="Are you sure delete this task?"
                  nzPopconfirmPlacement="bottom"
                  (nzOnConfirm)="confirm(item._id)"
                  (nzOnCancel)="cancel()"
                  *ngIf="item.parent"
                  nzSize="small"
          >删除
          </button>
        </td>
      </tr>
    </ng-container>
  </ng-container>
  </tbody>
</nz-table>
<nz-drawer
  [nzClosable]="false"
  [nzVisible]="visible"
  nzPlacement="right"
  [nzTitle]="edit._id ? '权限信息修改': '权限信息添加'"
  [nzWidth]="600"
  (nzOnClose)="close()"
>
  <div nz-row class="item">
    <div nz-col nzSpan="4">模块名称：</div>
    <div nz-col nzSpan="20"><input nz-input placeholder="Basic usage" [(ngModel)]="edit.module_name"/></div>
  </div>
  <div nz-row class="item">
    <div nz-col nzSpan="4">节点类型：</div>
    <div nz-col nzSpan="20">
      <nz-select [(ngModel)]="edit.type" (ngModelChange)="changeType(edit.type)">
        <nz-option [nzValue]="item.value" [nzLabel]="item.name" *ngFor="let item of typeChoose"></nz-option>
      </nz-select>
    </div>
  </div>
  <div nz-row class="item" *ngIf="edit.type != 1">
    <div nz-col nzSpan="4">操作名称：</div>
    <div nz-col nzSpan="20"><input nz-input placeholder="Basic usage" [(ngModel)]="edit.action_name"/></div>
  </div>
  <div nz-row class="item" *ngIf="edit.type != 1">
    <div nz-col nzSpan="4">操作地址：</div>
    <div nz-col nzSpan="20"><input nz-input placeholder="Basic usage" [(ngModel)]="edit.url"/></div>
  </div>
  <div nz-row class="item" *ngIf="edit.type == 3">
    <div nz-col nzSpan="4">请求方式：</div>
    <div nz-col nzSpan="20">
      <nz-select [(ngModel)]="edit.method" *ngIf="edit.type != 1">
        <nz-option [nzValue]="item.value" [nzLabel]="item.name" *ngFor="let item of methodData"></nz-option>
      </nz-select>
    </div>
  </div>
  <div nz-row class="item" *ngIf="edit.type == 1">
    <div nz-col nzSpan="4">图标：</div>
    <div nz-col nzSpan="20">
      <nz-select nzShowSearch nzAllowClear [(ngModel)]="edit.icon">
        <nz-option nzCustomContent [nzLabel]="item" [nzValue]="item" *ngFor="let item of iconData">
          <i nz-icon [nzType]="item"></i> {{item}}
        </nz-option>
      </nz-select>
    </div>
  </div>
  <div nz-row class="item">
    <div nz-col nzSpan="4">所属模块：</div>
    <div nz-col nzSpan="20">
      <nz-select [(ngModel)]="edit.module_id" *ngIf="edit.type != 1">
        <nz-option [nzValue]="item._id" [nzLabel]="item.module_name" *ngFor="let item of accessModule"></nz-option>
      </nz-select>
      <nz-select [(ngModel)]="edit.module_id" *ngIf="edit.type == 1">
        <nz-option nzValue="0" nzLabel="最上级模块"></nz-option>
      </nz-select>
    </div>
  </div>
  <div nz-row class="item">
    <div nz-col nzSpan="4">排序：</div>
    <div nz-col nzSpan="20"><input nz-input placeholder="Basic usage" [(ngModel)]="edit.sort"/></div>
  </div>
  <div nz-row class="item">
    <div nz-col nzSpan="4">描述：</div>
    <div nz-col nzSpan="20"><input nz-input placeholder="Basic usage" [(ngModel)]="edit.description"/></div>
  </div>
  <button nz-button nzType="primary" (click)="update()">{{edit._id ? '修改' : '添加'}}</button>
</nz-drawer>

